<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="mui/mui.min.css">
    <link rel="stylesheet" href="mui/mui.picker.min.css">
    <link rel="stylesheet" href="mui/mui.showLoading.css">
    <link rel="stylesheet" href="css/myAddress.css?20180820">
    <script src="js/flexible.js"></script>
    <title>获奖人信息</title>
</head>

<body>
    <div id="app" class="app">
        <div class="content">
            <div class="title">获奖人信息</div>
            <div class="my_message">
                <div class="message_line">
                    <p class="message_line_title">收件人姓名</p>
                    <input type="text" placeholder="请填写收件人姓名" v-model.trim="info.address.name">
                </div>
                <div class="message_line">
                    <p class="message_line_title">收件人地址</p>
                    <input type="text" style="-webkit-user-select:none;margin-bottom: 5px;" placeholder="选择所在地区" readonly="readonly" id="province_select"
                        v-model="city" @click="selectAddress">
                    <textarea type="text" rows="2" placeholder="填写详细地址" v-model.trim="info.address.address"></textarea>
                </div>
                <div class="message_line">
                    <p class="message_line_title">邮政编码</p>
                    <input type="text" placeholder="请填写邮政编码" v-model.trim="info.address.codeNum" maxlength="6">
                </div>
                <div class="message_line">
                    <p class="message_line_title">联系电话</p>
                    <input type="text" placeholder="请填写联系电话" v-model.trim="info.address.phone">
                </div>
            </div>
            <div class="parent">
                <div class="btn_t">
                    <div class="my_prize" @click="jump('2')">提  交</div>
                </div>
            </div>
            <!-- <div class="footer">
                <ul>
                    <li>
                        <div class="title">
                            <img src="img/xl.png" alt="">
                        </div>
                        <div class="code">
                            <img src="img/xlm.png" alt="">
                        </div>
                    </li>
                    <li class="left">
                        <div class="title">
                            <img src="img/wx.png" alt="">
                        </div>
                        <div class="code">
                            <img src="img/wxm.png" alt="">
                        </div>
                    </li>
                    <li class="text">
                        更多精彩活动请关注
                        <br/> 长荣航空微信公众号

                    </li>
                </ul>
            </div> -->
        </div>
    </div>
    <script src="mui/mui.min.js"></script>
    <script src="mui/mui.showLoading.js"></script>
    <script src="mui/mui.picker.min.js"></script>
    <script src="mui/province.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            info: {
                address: {
                    address: "",
                    city_name: "",
                    country_name: "",
                    phone: "",
                    province_name: "",
                    name: "",
                    codeNum: ""
                }
            },
            goods: [],
            theRequest: ""
        },
        computed: {
            city() {
                if (this.info.address.province_name == undefined || this.info.address.city_name == undefined || this.info.address.country_name == undefined) {
                    return ""
                } else {
                    return this.info.address.province_name + this.info.address.city_name + this.info.address.country_name
                }
            },
        },
        methods: {
            getUrl: function () {
                var theRequest = {};
                var url = decodeURIComponent(location.search); //获取url中"?"符后的字串
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    var strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            },
            jump: function () {
                if (!this.info.address["name"] || this.info.address["name"].trim() == "") {
                    mui.alert("请填写收件人姓名")
                    return false
                }
                if (!this.info.address["phone"] || this.info.address["phone"].trim() == "") {
                    mui.alert("请填写联系电话")
                    return false
                } else if (this.info.address["phone"].trim() != "") {
                    var reg = /^1\d{10}$/;
                    if (!reg.test(this.info.address["phone"])) {
                        mui.alert("手机号格式不正确", "提示");
                        return false
                    }
                }
                if(this.info.address.codeNum.trim()!==""){
                    if(this.info.address.codeNum.trim().length!==6){
                        mui.alert("邮政编码格式不正确", "提示");
                        return false
                    }
                }
                if (this.city == "" || !this.info.address["address"] || this.info.address["address"] == "") {
                    mui.alert("请填写收件人地址")
                    return false
                }
                localStorage.removeItem("info");
                localStorage.setItem("info", JSON.stringify(this.info));
                // if (this.theRequest.status == "1") {
                    window.location.href = "instructions.html?id="+this.theRequest.id+"&vip_id="+this.theRequest.vip_id+"&status=1&t=" + new Date().getTime();
                // } else if (this.theRequest.status == "2") {
                    // window.location.href = "instructions.html?id="+this.theRequest.id+"&vip_id="+this.theRequest.vip_id+"&status=2&t=" + new Date().getTime();
                // } else if (this.theRequest.status == "3") {
                    // window.location.href = "instructions.html?id="+this.theRequest.id+"&vip_id="+this.theRequest.vip_id+"&status=3&t=" + new Date().getTime();
                // }
                return true
            },
            getMessage:function(){
                var info=JSON.parse(localStorage.getItem('info'));
                if(info!==null){
                    this.info.address.name=info.address.name;
                    this.info.address.address=info.address.address;
                    this.info.address.province_name=info.address.province_name;
                    this.info.address.city_name=info.address.city_name;
                    this.info.address.phone=info.address.phone;
                    this.info.address.country_name=info.address.country_name;
                    this.info.address.codeNum=info.address.codeNum;
                }
            },
            initMui: function () {
                var _this = this;
                (function ($, doc, _this) {
                    mui.init();
                    mui.ready(function () {
                        var cityPicker3 = new $.PopPicker({
                            layer: 3
                        });
                        cityPicker3.setData(cityData3);
                        var showCityPickerButton = doc.getElementById('province_select');
                        var cityResult3 = doc.getElementById('cityResult3');
                        showCityPickerButton.addEventListener('tap', function (event) {
                            cityPicker3.show(function (items) {
                                var itemsValue = "";
                                for (var i = 0; i < items.length; i++) {
                                    if (items[i].text == undefined) {
                                        itemsValue += ""
                                    } else {
                                        itemsValue += items[i].text;
                                    }
                                }
                                showCityPickerButton.value = itemsValue;
                                Vue.set(_this.info.address, "province_name", items[0].text == undefined ? "" : items[0].text)
                                Vue.set(_this.info.address, "city_name", items[1].text == undefined ? "" : items[1].text)
                                Vue.set(_this.info.address, "country_name", items[2].text == undefined ? "" : items[2].text)
                            });
                        }, false);
                    })
                })(mui, document, _this)
            },
            selectAddress: function () {
                document.activeElement.blur();
                var _this = this;
                _this.cityPicker3.show(function (items) {
                    var itemsValue = "";
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].text == undefined) {
                            itemsValue += ""
                        } else {
                            itemsValue += items[i].text;
                        }
                    }
                    this.value = itemsValue;
                    Vue.set(_this.info.address, "province_name", items[0].text == undefined ? "" : items[0].text)
                    Vue.set(_this.info.address, "city_name", items[1].text == undefined ? "" : items[1].text)
                    Vue.set(_this.info.address, "country_name", items[2].text == undefined ? "" : items[2].text)
                });
            }
        },
        mounted() {
            var _this = this;
            mui.ready(function () {
                _this.cityPicker3 = new mui.PopPicker({
                    layer: 3
                });
                _this.cityPicker3.setData(cityData3);
            })
            this.theRequest=this.getUrl();
            this.getMessage();
        },
    })
</script>

</html>